<template>
	<div id="userOrder"> 
		<nav >
			<li v-for="(item,index) in navhader" :class="{active:item.isActive}" @click="onclickNav(item)" >
				<span>{{item.name}}</span>
			</li> 
		</nav>
		
		<!--<div class="conter">-->
			<scroller ref="scroller" :on-infinite="infinite">
				<div  class="mian">
					<ul class="orderall" v-if="items.length != 0">
						 <li  v-for="item,index in items">
						 	<dl class="shopdl">
						 		<dt><font>{{item.UserName}}</font>
						 			<span v-if="item.OrderStatus==1">待付款</span>
						 			<span v-else-if='item.OrderStatus==2'>待拼单</span>
						 			<span v-else-if="item.OrderStatus==3">待发货</span> 
						 			<span v-else-if="item.OrderStatus==4">已发货</span>
						 			<span v-else-if="item.OrderStatus==5">待评价</span>
						 			<span v-else-if="item.OrderStatus==6">订单已评价</span>
						 			<span v-else-if="item.OrderStatus==100">交易完成</span>
						 			<span v-else-if="item.OrderStatus==101">订单已关闭</span>
						 			<span v-else="item.OrderStatus==102">订单已取消</span>
						 		</dt>
						 		<dd class="shopcont" @click="getDetail(item)" >
						 			<i><img :src="item.GoodsImg" alt="加载失败" :onerror="imgError"></i>
						 			<div>
						 				<p><span>{{item.GoodsName}}</span> <span class="c-red">￥{{item.CloudPrice}}</span></p>
						 				<p><span></span> <span class="c-red">×{{item.GoodsCount}}</span></p>
						 			</div>
						 		</dd> 
						 		<dd class="shoptext"><span>共<font>{{item.GoodsCount}}</font>样商品</span> <span>总计：<font>￥{{item.TotalMoney}}</font></span></dd>
						 		<!--判断状态显示不同操作-->
						 		<dd class="shopbut" v-if='item.OrderStatus==2'>
						 			<span v-if="!item.texts"><i  class="loading"></i></span>
						 			<span v-else class="c-red">剩余   {{item.texts}}</span>
						 			<p>
						 				<!--<a>拼团分享</a>-->
						 				<a @click="getDetail(item)">详情</a>
						 				 
						 			</p>
						 		</dd>
						 		<dd class="shopbut" v-else-if="item.OrderStatus==4" > 
						 			<p>
						 				<!--<a>拼团分享</a>-->
						 				<a>已发货</a>
						 				<a @click="getDetail(item)">详情</a>
						 			</p>
						 		</dd>
						 		<dd class="shopbut" v-else-if="item.OrderStatus==1"> 
						 			<p>
						 				<!--<a @click="payNew(item)">立即付款</a>-->
						 				<a @click="getDetail(item)">详情</a>
						 			</p>
						 		</dd>
						 		<dd class="shopbut" v-else-if="item.OrderStatus==5"> 
						 			<p>
						 				<!--<a>拼单分享</a>-->
						 				<a @click="getDetail(item)">详情</a>
						 			</p>
						 		</dd>
						 		<dd class="shopbut" v-else-if="item.OrderStatus==3"> 
						 			<p>
						 			<!--	<a>拼单分享</a>-->
						 				<a @click="getDetail(item)">详情</a>
						 			</p>
						 		</dd>
						 		<dd class="shopbut" v-else-if="item.OrderStatus==6"> 
						 			<p> 
						 				<a>订单已评价</a>
						 			</p>
						 		</dd> 
						 		<dd class="shopbut" v-else-if="item.OrderStatus==100"> 
						 			<p> 
						 				<a>交易完成</a>
						 			</p>
						 		</dd> 
						 		<dd class="shopbut" v-else-if="item.OrderStatus==101"> 
						 			<p> 
						 				<a>订单已关闭</a>
						 			</p>
						 		</dd>
						 		<dd class="shopbut" v-else-if="item.OrderStatus==102"> 
						 			<p> 
						 				<a>订单已取消</a>
						 			</p>
						 		</dd>
						 	</dl>
						 	
						 </li>
					</ul>
					<!--没有数据时-->
					<!--<no-data  v-else title="还没有数据~~~"></no-data>-->
	
				</div>
			</scroller>
	 
		
	</div>
</template>
<script> 
	import { Toast } from 'mint-ui';
	import { Indicator } from 'mint-ui';
	import { countdowm } from '@/js/public.js';
	import Qs from 'qs';
	export default {
		name: 'userOrder',
		components: { 
		},
		data() {
			return {
				indexPage: 1, //请求页面索引
				type:0,
				items: [],
				itemTwo:[],
				navhader:[
					{
						name:'全部',
						isActive:true,
						type:0
					},
					{
						name:'待付款',
						isActive:false,
						type:1
					},
					{
						name:'待拼单',
						isActive:false,
						type:2
					},
					{
						name:'待发货',
						isActive:false,
						type:3
					},
					/*{
						name:'待评价',
						isActive:false,
						type:5
					}*/
				],
				done:''
				
			}
		},
		created(){
			this.imgError=this.$store.state.imgError;
		},
		mounted() {
			 
		},
		methods: {
			infinite(done){ 
				let _this=this;
				_this.done=done;
				Indicator.open({text: '加载中...'});
				 _this.$http.get("/ManagerGroupBuy/GetManageOrderList", {
					params: { 
						"page": this.indexPage,
						"status":this.type
					}
				}).then((res) => {   
					 let listdata=res.data.data.List; 
					 if(listdata=="") {
						done(true);
						Indicator.close();
					}else{ 
						if(_this.indexPage <= res.data.data.TotalPage) { 
							listdata.forEach(function(item){ 
								 countdowm(item.RestTime,function(text){ 
									 _this.$set(item,'texts',text);
								});
							});
							_this.indexPage++;
							_this.items = _this.items.concat(listdata); 
							setTimeout(function() {
								done()
							}, 3000) 
						} else {
							done(true)
							
						}
					}
					Indicator.close();
				}).catch((err) => {
					console.log(err)
				}); 
			},
			//根据状态查询
			onclickNav:function(item){
				let _this=this;
				_this.navhader.forEach(function(data){
					data.isActive=false;
				});
				item.isActive=true; 
				_this.items=[];
				_this.type=item.type;
				_this.indexPage=1;
				_this.infinite(_this.done);
			}, 
			//获取订单详情
			getDetail(item){
				 this.$router.push({path:'/merchant/userOrderDetail/'+item.Id}) 	
			}
			
		}
	}
</script>
<style scoped>
	nav{ 
		width: 100%;
		height: 1rem;
		background-color:#fff;
		display: flex;
		line-height:1rem;
		justify-content:space-around;
		font-size: 0.373333rem; 
		padding: 0 0.3rem;
		margin-bottom: 0.2rem;
	}
	nav li.active{
		color: #6530E0;
		border-bottom:2px solid #6530E0;
	} 
	._v-container{
		top: auto !important;
	}
	
	.orderall{
		width: 100%;
	}
	
	.orderall li{
		margin-bottom:0.2rem;
	}
	
	.orderall li .shopdl{
		width: 100%;
		background-color: #fff;

		font-size: 0.346666rem;
		color: #666666;
	}
	
	.orderall li .shopdl dt{
		display:flex;
		padding: 0.2rem 0.3rem;
		justify-content:space-between;
		border-bottom: 1px solid #CCCCCC;
	}
	.orderall li .shopdl dt span{
		color: #6530E0;
	}
	
	.orderall li .shopdl .shopcont{
		display: flex;
		padding: 0.2rem 0.3rem;
		border-bottom: 1px solid #CCCCCC;
	} 
	.shopcont i{
		width: 25%;
		height:2rem;
		margin-right: 5%;
	}
	.shopcont i img{
		width: 100%;
		height: 100%;
	}
	.shopcont div{
		display: flex;
		width:70%;
		flex-direction: column;
		justify-content: space-around;
	}
	.shopcont div p{
		display: flex;
		justify-content: space-between;
	}
	.shoptext{
		padding: 0.2rem 0.3rem;
		text-align: right;
		border-bottom:1px solid #CCCCCC;
	}
	.shoptext font{
		color: #DF4444;
	}
	.shopbut {
		padding: 0.2rem 0.3rem;
		overflow: hidden;
	}
	.shopbut span{
		margin-top: 0.18rem;
		font-size: 0.32rem;
		float: left;
	}
	.shopbut p{
		float: right;
	}
	.shopbut p a{
		display: inline-block; 
		color: #fff;
		padding: 0.1rem 0.4rem; 
		margin-left: 0.5rem;
		font-size: 0.373333rem;
		background: linear-gradient(-92deg,#8900e0 0%, #1896e0 180%);
		box-shadow: 0.1rem 0.1rem 0.1rem 1px #ccc; 
		border-radius:0.5rem;
	}
</style>